<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客户管理</title>
<link rel="stylesheet" href="${ctx}/resources/layui/css/layui.css">
</head>
<body style="padding: 10px;">
	<!--  搜索条件开始 -->
	<form class="layui-form" method="post" id="searchFrm"
		lay-filter="searchFrm">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">身份证号</label>
				<div class="layui-input-inline">
					<input type="text" name="identity" autocomplete="off"
						class="layui-input">
				</div>
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-inline">
					<input type="text" name="custname" autocomplete="off"
						class="layui-input">
				</div>

				<label class="layui-form-label">职位</label>
				<div class="layui-input-inline">
					<input type="text" name="career" autocomplete="off"
						class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">地址</label>
				<div class="layui-input-inline">
					<input type="text" name="address" autocomplete="off"
						class="layui-input">
				</div>
				<label class="layui-form-label">电话</label>
				<div class="layui-input-inline">
					<input type="text" name="phone" autocomplete="off"
						class="layui-input">
				</div>
				<label class="layui-form-label">sex</label>
				<div class="layui-input-inline">
					<input type="radio" name="sex" value="1" title="男">
					<input type="radio" name="sex" value="0" title="女">
				</div>
				<button type="button" class="layui-btn layui-icon layui-icon-search"
					lay-submit="" lay-filter="doSearch">查询</button>
				<button type="reset"
					class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
			</div>
		</div>
		<div class="layui-form-item" style="text-align: right;">
			<button type="buttom" lay-submit="" lay-filter="doExport"
					class="layui-btn layui-btn-warm layui-icon layui-icon-download-circle">导出数据</button>
		</div>
	</form>
	<!-- 搜索条件结束-->
	<!-- 数据表格开始 -->
	<table class="layui-hide" id="customerTable" lay-filter="customerTable"></table>
	<!-- 数据表格结束 -->
	<!-- 表格头部工具栏开始 -->
	<div style="display: none;" id="customerToolbar">
		<button type="button" class="layui-btn" lay-event="add">添加</button>
		<button type="button" class="layui-btn layui-btn-danger"
			lay-event="batchDelete">批量删除</button>
	</div>
	<!-- 表格头部工具栏结束 -->
	<!-- 表格行工具栏开始 -->
	<div style="display: none;" id="customerRowbar">
		<button type="button" class="layui-btn layui-btn-sm"
			lay-event="update">修改</button>
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-danger"
			lay-event="delete">删除</button>
	</div>
	<!-- 表格行工具栏结束 -->
	<!-- 添加和修改弹出层开始 -->
	<div style="display: none;padding: 10px;" id="addOrUpdateDiv">
		<form class="layui-form" method="post" lay-filter="dataFrm"
			id="dataFrm">
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">身份证</label>
					<div class="layui-input-block">
						<input type="text" id="identity" name="identity" placeholder="请输入姓名"
							lay-verify="required|identity" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">姓名</label>
					<div class="layui-input-block">
						<input type="text" name="custname" placeholder="请输入姓名"
							lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">地址</label>
					<div class="layui-input-block">
						<input type="text" name="address" placeholder="请输入地址"
							 autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">电话</label>
					<div class="layui-input-block">
						<input type="text" name="phone" placeholder="请输入电话"
							 autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">职位</label>
					<div class="layui-input-block">
						<input type="text" name="career" placeholder="请输入职位"
							 autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-block">
						<input type="radio" name="sex" value="1" title="男" checked="checked">
						<input type="radio" name="sex" value="0" title="女">
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="margin: 10px; text-align: right;">
				<div class="layui-input-block">
					<button type="button"
						class="layui-btn layui-icon layui-icon-release" lay-submit=""
						lay-filter="doSubmit">保存</button>
					<button type="reset" id="dataFrmResetBtn"
						class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!--   添加和修改弹出层结束 -->
	<script src="${ctx}/resources/layui/layui.js"></script>
	<script>
		var tableIns;
		layui.use([ 'layer', 'table', 'form'],function() {
		var $ = layui.$;
		var layer = layui.layer;
		var table = layui.table;
		var form = layui.form;
		//初始化客户数据表格
		tableIns = table.render({
			elem : '#customerTable' //渲染的目标对象
			,url : '${ctx}/customer/customerList.action' //数据接口
			,title : '客户表'
			,toolbar : "#customerToolbar" //表头的工具条
			,height : "full-150"
			,page : true //是否启用分页
			,cols : [ [ 
				{type : 'checkbox',fixed : 'left'}, 
				{field : 'identity',title : '身份证号',align : "center",width : "180"}, 
				{field : 'custname',title : '姓名',align : "center",width : "100"}, 
				{field : 'sex',title : '性别',align : "center",width : "60", templet:function(d){
			    	  return d.sex=="1"?"<span style='color:blue;'>男</span>":"<span style='color:red;'>女</span>";
			    }},
				{field : 'address',title : '地址',align : "center",width : "160"}, 
				{field : 'phone',title : '电话',align : "center",width : "140"}, 
				{field : 'career',title : '职位',align : "center",width : "100"}, 
				{field : 'createtime',title : '录入时间',align : "center",width : "180"}, 
				{fixed : 'right',title : '操作',toolbar : "#customerRowbar",align : "center",width : "150"}
			] ],
			done : function(res, curr, count) {
				//判断当前页码是否大于1
				if (curr > 1 && res.data.length == 0) {
					var pageValue = curr - 1;
					tableIns.reload({
						page : {
							curr : pageValue
						}
					});
				}
			}
		});
		//监听查询表单的提交
		form.on("submit(doSearch)", function(data) {
			if(data.field.sex == undefined){
				data.field.sex = "";
			}
			tableIns.reload({
				where : data.field,
				page : {
					curr : 1
				}
			});
			return false;
		})
		//导出数据
		form.on("submit(doExport)", function(data) {
			if(data.field.sex == undefined){
				data.field.sex = "";
			}
			var params = $("#searchFrm").serialize();
			window.location.href = "${ctx}/stat/exportCustomer.action?"+params;
			return false;
		})
		//1. 监听头工具栏事件 
		table.on("toolbar(customerTable)", function(obj) {
			switch (obj.event) {
			case "add":
				openAddCustomer();
				break;
			case "batchDelete":
				batchDelete();
				break;
			}
		});
		//弹出层实例
		var mainIndex;
		//弹出层对应的提交url
		var url;
		var checkFlag = false;//标志身份证 是否可用（不重复）
		function initIdentity(){
			$("#identity").removeAttr("readonly");
			//绑定[登录名称]输入框的 失去焦点事件方法， 实现无刷新验证登录名称是否可用
	        $("#identity").bind("blur",function () {
	            //获取登录名称
	            var identity = $(this).val().trim();
	            //判断是否为空
	            if(identity.length == 18){
		           //发送验证的请求
		           $.post("${ctx}/customer/checkIdentity.action",{"identity":identity},function (result) {
		           	checkFlag = result.success;
		               layer.msg(result.message);
		           },"json");
	            } 
	        });
		}
		//表单验证规则
		form.verify({
			identity : function(value, item) {
				if (value.length != 18) {
					return "身份证号长度需为18位";
				}
			}
		})
		//打开添加客户弹出层
		function openAddCustomer() {
			mainIndex = layer.open({
				type : 1,
				title : "添加客户",
				content : $("#addOrUpdateDiv"),
				area : [ '700px' ],
				success : function(ayero, index) {
					//清空表单数据 jquery对象转dom对象，有reset函数
					$("#dataFrm")[0].reset();
					//提交路径
					url = "${ctx}/customer/addCustomer.action";
					checkFlag=false;	//默认开始时，identity不可用
					initIdentity();	//初始化identity验证绑定
				}
			});
	
		}
		//监听添加或修改用户弹出层的提交操作
		form.on("submit(doSubmit)",function(data) {
			if(!checkFlag){
                //identity可用
                layer.msg("身份证号[ "+data.field.identity+" ]不可用!");
                return false;
            }
			//序列化表单数据
			var params = $("#dataFrm").serialize();
			//console.log(params);
			$.post(url, params, function(result) {
				if (result.success) {
					//刷新数据表格
					tableIns.reload();
				}
				//显示响应提示信息
				layer.msg(result.message);
				//关闭弹出层
				layer.close(mainIndex);
			});
			//阻止表单提交
			return false;
		});
	
		//批量删除
		function batchDelete() {
			//获取当前选中行
			var checkStatus = table.checkStatus('customerTable');
			//判断是否有选中行
			var length = checkStatus.data.length;
			if (length > 0) {
				layer.confirm("确定删除这[ " + length+ "]个客户?",{icon : 3,title : "提示"},function(index) {
					var data = checkStatus.data;
					var params = "";
					$.each(data,function(i,item) {
						if (i == 0) {
							params += "identitys="+ item.identity;
						} else {
							params += "&identitys="+ item.identity;
						}
					});
					$.post("${ctx}/customer/batchDeleteCustomer.action",params,function(result) {
						if (result.success) {
							//刷新数据表格
							tableIns.reload();
						}
						layer.msg(result.message);
					});
					//关闭提示框
					layer.close(index);
				});
			} else {
				layer.msg("请选择要删除的行!");
			}
		}
	
		//5. 监听行工具栏事件
		table.on('tool(customerTable)', function(obj) {
			var data = obj.data; //获得当前行数据
			switch (obj.event) {
			case 'update':
				openUpdateCustomer(data);
				break;
			case 'delete':
				deleteCustomer(data);
				break;
			}
		});
		//打开修改用户弹出层
		function openUpdateCustomer(data) {
			mainIndex = layer.open({
				type : 1,
				title : "修改客户",
				content : $("#addOrUpdateDiv"),
				area : [ '700px' ],
				success : function(ayero, index) {
					//回显表单
					form.val('dataFrm', data);
					//提交路径
					url = "${ctx}/customer/updateCustomer.action";
					//设置只读
                    $("#identity").attr("readonly","readonly");
                    //移除失去焦点事件
                    $("#identity").unbind("blur");
                    checkFlag = true;
				}
			});
		}
	
		//删除客户
		function deleteCustomer(data) {
			layer.confirm("是否删除姓名为 [" + data.custname + " ]的客户?", {"icon" : 3,"title" : "提示"}, function(index) {
				$.post("${ctx}/customer/deleteCustomer.action",
				{
					"identity" : data.identity
				}, function(result) {
					if (result.success) {
						//刷新数据表格
						tableIns.reload();
					}
					layer.msg(result.message);
				}, "json");
			});
		}
	});
	</script>
</body>
</html>